<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/echarts.js"></script>
</head>
<body style="width: 100%;height: 100%">
<div class="qkc_out">
    <div class="qkc">
        <div id="main" style="width: 96%;height:580px;margin-left: 2%;padding-top: 20px;z-index: 1"></div>
    </div>
</div>
</body>
<script type="text/javascript">
    var d=[]
    var da=[]
        $.ajax({//GET请求通过用户id 获取用户信息
            url: ppath+"getlishi",
            type: "GET",
            async: false,
            dataType: "text",
            success: function (result) {
                console.log("测试收支历史：",result)
                result=JSON.parse(result)
               for(var i=0;result.length;i++){
                   d.push(result[i].baoxiaotime.substring(0,10))
                   da.push(result[i].yue)
               }
            },
            error: function (res){//请求异常时的回调
                alert("没有该用户")
            }
        });

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            x: 'center',
            text: '收支历史情况'
        },
        tooltip: {},
        xAxis: {
            type: 'category',
            name: '报销日期',
            boundaryGap: false,
            // data: ["2017-12-20","2017-12-20","2017-12-20","2017-12-20","2017-12-20","2017-12-20","2017-12-20"]
            data: d
        },
        yAxis: {
            name: '剩余金额'},
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        series: [{
            name: '剩余总额',
            type: 'line',
            itemStyle: {
                color: '#E19C9A'
            },
            // data: [5, 20, 36, 10, 10, -20,1]
            data: da
        }],
        dataZoom: [
            {   // 这个dataZoom组件，默认控制x轴。
                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                start: 10,      // 左边在 10% 的位置。
                end: 60         // 右边在 60% 的位置。
            }
        ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<style>
    .qkc{
        margin-left: 160px;
        margin-right: 160px;
        height: 610px;
        background-color: white;
    }
    .qkc_out{
        height: 610px;
        width: 100%;
        background-color: #E6EBF5;
    }
</style>
</html>